<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			[a=b] {
				width: 200px;
				height: 200px;
				background-color: red;
			}

			.red {
				width: 300px;
				height: 300px;
				background-color: red;
			}

		</style>
	</head>
	<body>
		<div id="box">
			<span>呵呵</span>
		</div>
	</body>
</html>
<script>
	var boxDiv = document.getElementById('box');

	// 设置行内属性
	boxDiv.setAttribute('a', 'b');

	// 读取行内属性的值
	var value = boxDiv.getAttribute('a');
	console.log(value);

	setTimeout(function() {
		boxDiv.removeAttribute('a');
	}, 3000);

	setTimeout(function() {
		// 修改元素的class值
		boxDiv.className = "red";
		// 改id
		boxDiv.id = "a";
	}, 5000);

	// 创建元素
	var img = document.createElement('img');
	console.dir(img);
	img.src = "girl.jpg";
	var p = document.createElement('p');
	p.innerHTML = "我是p标签";
	// 把img插入到body的末尾
	document.body.appendChild(img);
	// document.body.appendChild(p);

	// 把p标签插入到img标签前面
	// document.body.insertBefore(p, img);


	// 用p标签替换img标签
	document.body.replaceChild(p, img);

	// 移除body中的p标签
	document.body.removeChild(p);


	boxDiv.onclick = function() {
		console.log(this);
		// 从文档中删除该节点
		// 点击谁, 谁就是this(目前先这样理解 )
		this.remove();
	};
	





</script>